import React, { useState, useEffect } from "react";
import ReactEcharts from "echarts-for-react";
import { Card, Button } from "antd";

const LineChart = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = () => {
      const res = {
        status: 0,
        data: {
          dataPoints: [10, 20, 30, 40, 50, 60],
        },
      };

      if (res.status === 0) {
        setData(res.data.dataPoints);
      }
    };

    setTimeout(fetchData, 100);
  }, []);

  const getOption = (dataPoints) => ({
    title: {
      text: "线形图示例",
      textStyle: {
        color: "blue",
      },
    },
    tooltip: {},
    legend: {
      data: ["数据点"],
    },
    xAxis: {
      type: "category",
      data: ["一月", "二月", "三月", "四月", "五月", "六月"],
    },
    yAxis: {},
    series: [
      {
        name: "数据点",
        type: "line",
        data: dataPoints,
      },
    ],
  });

  const update = () => {
    setData(data.map((point) => point + 5));
  };

  return (
    <div>
      <Card
        title={
          <Button type="primary" onClick={update}>
            更新数据
          </Button>
        }
      >
        <ReactEcharts
          option={getOption(data)}
          style={{ height: "400px", width: "100%" }}
        />
      </Card>
    </div>
  );
};

export default LineChart;
